import React, { Component } from 'react';
import { DatePicker, Col, Row, Button, Input,Form } from 'antd';
import styles from './index.less';

const { RangePicker } = DatePicker;

class SearchContainer extends Component {
	static defaultProps = {
		emitSearch: () => { },
		emitExport: () => { }
	}
	// 触发查询
	handleSubmit = e => {
		const { emitSearch } = this.props;
		e.preventDefault();
		this.props.form.validateFields((err, fieldsValue) => {
			if (err) return;
			const rangeValue = fieldsValue['date'];
			const values = {
				...fieldsValue,
				'date': rangeValue && [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
			}
			emitSearch(values)
		});
	};
	// 重置搜索条件
	handleReset = () => {
		this.props.form.resetFields();
	};
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<>
				<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
					<Row>
						<Col span={8}>
							<Form.Item label="选择日期">
								{getFieldDecorator('date', {
									rules: [{ required: false, message: '请选择日期!' }],
								})(<RangePicker style={{ width: 400 }} />)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item label="商品名称">
								{getFieldDecorator('goodsName', {
									rules: [{ required: false, message: '请输入商品名' }],
								})(<Input placeholder='请输入'/>)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<div className={styles.btn}>
								<Button type="primary" htmlType="submit">查询</Button>
								<Button type="default" onClick={this.handleReset}>重置</Button>
								<Button type="primary" onClick={this.props.emitExport}>导出</Button>
							</div>
						</Col>
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item label="通用名称">
								{getFieldDecorator('commonName', {
									rules: [{ required: false, message: '请输入通用名!' }],
								})(<Input placeholder='请输入'/>)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item label="商品类别">
								{getFieldDecorator('goodsType', {
									rules: [{ required: false, message: '请输入商品类别' }],
								})(<Input placeholder='请输入'/>)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item label="生产单位">
								{getFieldDecorator('producer', {
									rules: [{ required: false, message: '请输入生产单位' }],
								})(<Input placeholder='请输入'/>)}
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</>
		)
	}
}

SearchContainer = Form.create()(SearchContainer);
export default SearchContainer;
